<template>
	<div class="parts-define-edit-thickness-root">
		<ux-grid class="ux-table" ref="singleTable" :data="tableData" :header-cell-style="{
			color: 'rgba(0, 0, 0, 0.85)',
			fontSize: '14px',
			textAlign: 'left',
			fontWeight: 'bold',
			padding: 0,
			height: '32px',
			background: 'rgb(244,245,246)'
		}" :cell-style="{
			color: 'rgba(96,98,102,1)',
			fontSize: '14px',
			textAlign: 'left',
			padding: 0,
			height: '32px',
		}" :checkbox-config="{
			showHeader: false,
		}" @current-change="handleTableCurrentChange" :height="tableHeight" highlight-current-row element-loading-spinner="el-icon-loading"
			element-loading-background="#f8f8f8" :element-loading-text="$t('message.bhView.loading')">
			<template slot="empty"> No data </template>
			<ux-table-column property="label" :title="$t('message.PartsDefine.PartsDefineThicknessTable.pointNo')" width="200" align="left">
				<template slot-scope="scope">
					<p style="text-align: right;">{{ scope.row.pointNo }}</p>
				</template>
			</ux-table-column>
			<ux-table-column property="label" :title="$t('message.PartsDefine.PartsDefineThicknessTable.measuringPointName')" width="280" align="left">
				<template slot-scope="scope">
					<p style="text-align: left;">{{ scope.row.measuringPointName }}</p>
				</template>
			</ux-table-column>
			<ux-table-column property="label" :title="$t('message.PartsDefine.PartsDefineThicknessTable.pointName')" width="280" align="left">
				<template slot-scope="scope">
					<p style="text-align: left;">{{ scope.row.pointName }}</p>
				</template>
			</ux-table-column>
			<ux-table-column property="label" :title="$t('message.PartsDefine.PartsDefineThicknessTable.constructionItems')" align="left">
				<template slot-scope="scope">
					<p style="text-align: left;">{{ scope.row.constructionItems }}</p>
				</template>
			</ux-table-column>
		</ux-grid>		
	</div>
</template>

<script>
import _ from 'lodash-es';
import $ from "jquery";
export default {
	props: ["dmgCode", "tableData"],
	components: {
    },
	// ["userInfo"],
	// dataプロパティ：変更が検知されるような値
	data() {
		return {
			tableHeight: 400
		}
	},
    created() {
	},
    watch: {
    },
	methods: {
		getTableHeight() {
			this.tableHeight = $(".parts-define-edit-thickness-root").height() - 48;
		},
		handleTableCurrentChange(val) {
			this.$emit("selectPoint", val);
		}
	},
	mounted() {
		this.getTableHeight();
	},
};
</script>

<style lang="scss" scoped>
.b-input {
	// align-items: center;
	margin-top: 12px;
	margin-bottom: 12px;

	.b-input-label {
		font-size: 14px;
		color: rgba(0, 0, 0, 0.85);
		height: 24px;
		line-height: 24px;
		font-family: HelveticaNeue;
		text-align: center;
	}
}
.parts-define-edit-thickness-root {
	width: 100%;
	height: 35%;

	::v-deep .current-row>td {
		background-color: rgba(2, 150, 255, 0.07) !important;
	}
}
.ux-table {
	::v-deep .elx-table--body-wrapper {
		width: auto !important;
	}

	::v-deep .elx-table--empty-placeholder {
		// margin-top: 30px;
		height: 100% !important;
	}
}
</style>